<template>
  <div class="app-container calendar-list-container">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input type="text" :value="userInfo.username" disabled></el-input>
            </el-form-item>
            <el-form-item v-if="visible1" label="原密码" prop="password">
              <el-input type="password" v-model="ruleForm2.password" placeholder="请输入原密码" auto-complete="off">
                <i slot="suffix" title="显示密码" @click="changePass1('show')" style="cursor:pointer;"
                   class="el-icon-view"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="原密码" prop="password">
              <el-input type="text" v-model="ruleForm2.password" placeholder="请输入原密码" auto-complete="off">
                <i slot="suffix" title="隐藏密码" @click="changePass1('hide')" style="cursor:pointer;"
                   class="el-icon-view"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-if="visible2" label="新密码" prop="newpassword1">
              <el-input type="password" v-model="ruleForm2.newpassword1" placeholder="请输入新密码" auto-complete="off">
                <i slot="suffix" title="显示密码" @click="changePass2('show')" style="cursor:pointer;"
                   class="el-icon-view"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="新密码" prop="newpassword1">
              <el-input type="text" v-model="ruleForm2.newpassword1" placeholder="请输入新密码" auto-complete="off">
                <i slot="suffix" title="隐藏密码" @click="changePass2('hide')" style="cursor:pointer;"
                   class="el-icon-view"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-if="visible3" label="确认新密码" prop="newpassword2">
              <el-input type="password" v-model="ruleForm2.newpassword2" placeholder="请再次输入新密码" auto-complete="off">
                <i slot="suffix" title="显示密码" @click="changePass3('show')" style="cursor:pointer;"
                   class="el-icon-view"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="确认新密码" prop="newpassword2">
              <el-input type="text" v-model="ruleForm2.newpassword2" placeholder="请再次输入新密码" auto-complete="off">
                <i slot="suffix" title="隐藏密码" @click="changePass3('hide')" style="cursor:pointer;"
                   class="el-icon-view"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm2.phone" auto-complete="off" placeholder="验证码登录使用"></el-input>
            </el-form-item>
            <!--<el-form-item label="头像">-->
            <!--<my-upload field="file" @crop-upload-success="cropUploadSuccess" v-model="show" :width="300" :height="300" url="/admin/user/upload" :headers="headers"></my-upload>-->
            <!--<img :src="userInfo.avatar">-->
            <!--<el-button type="primary" @click="toggleShow" size="mini">选择-->
            <!--<i class="el-icon-upload el-icon&#45;&#45;right"></i>-->
            <!--</el-button>-->
            <!--</el-form-item>-->
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
              <el-button @click="resetForm('ruleForm2')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

  </div>
</template>


<script>
import { mapState } from "vuex";
import myUpload from "vue-image-crop-upload";
import { getToken } from "@/util/auth";
import ElFormItem from "element-ui/packages/form/src/form-item.vue";
import request from "@/router/axios";

export default {
  components: {
    ElFormItem,
    "my-upload": myUpload
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6) {
        callback(new Error("密码不能小于6位"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.newpassword1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value.length == 0) {
        if (this.userInfo.username != "admin" && this.userInfo.type != "1") {
          callback(new Error("请输入手机号!"));
        }
      } else {
        var patt1 = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!patt1.test(value)) {
          callback(new Error("手机号码格式不正确!"));
        }
        
      }
      callback();
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else if (value.length < 6) {
        callback(new Error("密码不能小于6位"));
      } else {
        callback();
      }
    }
    return {
      visible1: true,
      visible2: true,
      visible3: true,
      fileList: [],
      show: false,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      ruleForm2: {
        password: "",
        newpassword1: "",
        newpassword2: "",
        avatar: "",
        phone:""
      },
      rules2: {
        newpassword1: [{validator: validatePass, trigger: 'blur'}],
        newpassword2: [{validator: validatePass2, trigger: 'blur'}],
        password: [{validator: validatePass3, trigger: 'blur'}],
        phone: [
          {
            validator: validatePhone,trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
  },
  methods: {
    changePass1(value) {
      this.visible1 = !(value === 'show');
    },
    changePass2(value) {
      this.visible2 = !(value === 'show');
    },
    changePass3(value) {
      this.visible3 = !(value === 'show');
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm2.avatar = this.avatar;
          request({
            url: "/admin/user/editInfo",
            method: "put",
            data: this.ruleForm2
          })
            .then(response => {
              console.log(response)
              if (response.data.data !== false) {
                this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                  duration: 2000
                });
                // 修改密码之后强制重新登录
                if (this.ruleForm2.newpassword1 !== "") {
                  this.$store.dispatch("LogOut").then(() => {
                    location.reload(); // 为了重新实例化vue-router对象 避免bug
                  });
                } else {
                  this.$router.push({ path: "/" });
                }
              } else {
                this.$notify({
                  title: "修改失败",
                  message: "您输入的原密码不正确",
                  type: "fail",
                  duration: 2000
                });
              }
            })
            .catch(() => {
              this.$notify({
                title: "失败",
                message: "修改失败",
                type: "fail",
                duration: 2000
              });
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      const set = this.$refs;
      set[formName].resetFields();
    },

    toggleShow() {
      this.show = !this.show;
    },
    /**
     * upload success
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess(jsonData, field) {
      console.log("-------- upload success --------");
      this.$store.commit("SET_AVATAR", jsonData.filename);
    }
  }
};
</script>
